<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:replace="include/tocssp"/>
    <title>登录</title>
    <style type="text/css">
        body {
            margin: 0;
            background: url(/static/images/findpassword.jpg) no-repeat 0px 0px;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }

        #embed-captcha {
            width: 320px;
            margin: 0 auto;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }

        .form_legend {
            -moz-border-bottom-colors: none;
            -moz-border-image: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            border-color: #0aa284;
            border-style: none none solid;
            border-width: 0 0 1px;
            color: #333;
            display: block;
            font-size: 19.5px;
            line-height: 30px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            width: 95%;
            border-color: #16a085;
        }
    </style>
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
</head>
<body>
<th:block th:replace="include/header:: header"/>
<div class="container-findpassword">
    <div class="findpassword">
        <div>
            <legend class="form_legend">
                找回密码
            </legend>
            <form id="findPassword">
                <div class="form-group">
                    <input class="form-control" placeholder="请输入邮箱" name="email" id="email"/>
                </div>
                <div class="form-group">
                    <div id="embed-captcha"></div>
                    <p id="wait" class="show">正在加载验证码......</p>
                    <p id="notice" class="hide">请先拖动验证码到相应位置</p>
                </div>
            </form>
            <div class="form-group">
                <button type="button" class="btn btn-info block full-width" id="findpasswords">发送验证码</button>
            </div>
            <p class="foot">
                <a href="/signin">返回进行登录</a>
                |
                <a href="/register">注册一个新账号</a>
            </p>
        </div>
    </div>

    <script>

        function checkForm(content, doc) {
            var d = dialog({
                content: content,
                align: 'right',
                quickClose: true // 点击空白处快速关闭
            });
            d.show(document.getElementById(doc));
        }

        var handlerEmbed = function (captchaObj) {
            $("#findpassword").click(function (e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    $("#notice")[0].className = "show";
                    setTimeout(function () {
                        $("#notice")[0].className = "hide";
                    }, 2000);
                    e.preventDefault();
                } else {
                    var email = $('#email').val();
                    var emailreg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                    if (email == null || $.trim(email) == '') {
                        checkForm('邮箱不能为空', 'email');
                        $("#email").parent().addClass('has-error');
                    } else if (!emailreg.test(email)) {
                        checkForm('请输入正确的邮箱', "email");
                        $("#email").parent().addClass('has-error');
                    } else {
                        $("#email").parent().removeClass('has-error');
                        var loadingindex = layer.load(0, {
                            shade: [0.1, '#fff'] //0.1透明度的白色背景
                        });
                        $.ajax({
                            url: fzqblog.realpath + '/sendCheckCode',
                            type: 'POST',
                            dataType: 'json',
                            data: $('#findPassword').serialize(),
                            success: function (data) {
                                layer.close(loadingindex);
                                if (data.errorMsg == null) {
                                    var content = '<form id="modifyPassword"><div class="form-group"><input class="form-control" type="password" placeholder="请输入新密码" name="password" id="password"></input></div><div class="form-group"><input class="form-control" type="password" placeholder="请确认新密码" name="confirmPassword" id="confirmPassword"></input></div><div class="form-group"><input class="form-control" placeholder="验证码" name="checkcode" id="checkcode"></input></div></form>';
                                    var d = dialog({
                                        title: '修改密码',
                                        width: 300,
                                        content: content,
                                        okValue: '确定',
                                        ok: function () {
                                            var passwordreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
                                            var password = $('#password').val();
                                            var confirmPassword = $('#confirmPassword').val();
                                            var checkcode = $("#checkcode").val();
                                            if (password == null || $.trim(password) == '') {
                                                checkForm('密码不能是空串', 'password');
                                                $("#password").parent().addClass('has-error');
                                                return false;
                                            } else if (password.indexOf(" ") > -1) {
                                                checkForm('密码不能含有空格', 'password');
                                                $("#password").parent().addClass('has-error');
                                                return false;
                                            } else if (password.length < 6) {
                                                checkForm('密码长度不能小于6个字符', 'password');
                                                $("#password").parent().addClass('has-error');
                                                return false;
                                            } else if (password.length > 16) {
                                                checkForm('密码长度不能大于16个字符', 'password');
                                                $("#password").parent().addClass('has-error');
                                                return false;
                                            } else if (!passwordreg.test(password)) {
                                                checkForm('密码必须含有字母和数字', 'password');
                                                $("#password").parent().addClass('has-error');
                                                return false;
                                            } else if (confirmPassword != password) {
                                                $("#password").parent().removeClass('has-error');
                                                checkForm('两次输入密码必须一致', 'confirmPassword');
                                                $("#confirmPassword").parent().addClass('has-error');
                                                return false;
                                            } else if (checkcode == null || $.trim(checkcode) == '') {
                                                $("#confirmPassword").parent().removeClass('has-error');
                                                checkForm("验证码不能为空串", "checkcode");
                                                $("#checkcode").parent().addClass('has-error');
                                                return false;
                                            } else {
                                                $.ajax({
                                                    url: fzqblog.realpath + '/findPassword.do',
                                                    type: 'POST',
                                                    dataType: 'json',
                                                    data: {
                                                        "email": email,
                                                        "password": password,
                                                        "checkcode": checkcode
                                                    },
                                                    success: function (data) {
                                                        if (data.errorMsg == null) {
                                                            var d = dialog({
                                                                content: "<div><img src='/static/images/loading.gif' />&nbsp;&nbsp;&nbsp;修改成功,跳转中...</div>",
                                                            });
                                                            d.showModal();
                                                            setTimeout(function () {
                                                                d.close().remove();
                                                                document.location.href = "/login";
                                                            }, 1000);
                                                        } else {
                                                            checkForm(data.errorMsg, "checkcode");
                                                        }
                                                    }
                                                });
                                                return false;

                                            }
                                        },
                                        cancelValue: '取消',
                                        cancel: function () {
                                        }
                                    });
                                    d.show();

                                } else {
                                    checkForm(data.errorMsg, "email");
                                }
                            }
                        });


                    }
                }
            });
            // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
            captchaObj.appendTo("#embed-captcha");
            captchaObj.onReady(function () {
                $("#wait")[0].className = "hide";
            });
            // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
        };
        $.ajax({
            // 获取id，challenge，success（是否启用failback）
            url: "geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
                // 使用initGeetest接口
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                    offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                }, handlerEmbed);
            }
        });
    </script>
    <br><br>
    <th:block th:replace="include/footer:: footer"/>
    <th:block th:replace="include/top"/>
</div>
</body>
</html>